<template>
  <el-cascader
    v-model="val"
    clearable
    :options="options"
    :props="props"
    filterable
    placeholder="请选择"
    @change="change"
  >
    <div slot-scope="{ data }">
      <div class="one_line" :title="data.mc">{{data.mc}}</div>
    </div>
  </el-cascader>
</template>
<script>
import request from '@/utils/request';
export default {
  props: {
    value: {
      type: [ String, Number, Array ],
      default () {
        return ''
      }
    },
    trigger: { // 展开方式
      type: [ String ],
      default: 'hover'
    },
    multiple: { // 是否多选
      type: Boolean,
      default: false
    },
    checkStrictly: { // 是否出现选择按钮
      type: Boolean,
      default: true
    }
  },
  data () {
    return {
      props: {
        label: 'mc',
        children: 'children',
        checkStrictly: true,
        expandTrigger: 'hover',
        multiple: false,
        value: 'id',
        emitPath: false,
      },
      val: '',
      options: []
    }
  },
  watch: {
    // val: {
    //   handler: 'handler',
    //   deep: true
    // },
    value () {
      this.val = this.value;
    }
  },
  mounted () {
    this.val = this.value;
    for (let key in this.props) {
      const item = this.$props[key];
      if (item !== undefined && key !== 'value') {
        this.$set(this.props, key, item);
      }
    }
    this.getSyncData();
  },
  methods: {
    /**
     * @name handler
     * @description watch
     * @author cjs1992
     * @date 2019-11-20 08:50:45
     */
    handler (val) {
      // const list = JSON.parse(
      //   JSON.stringify(val)
      // );
      // console.log(list, val)
      // val = JSON.parse(
      //   JSON.stringify(val)
      // );
      this.$emit('input', val);
    },
    /**
     * @name change
     * @description change事件
     * @author cjs1992
     * @date 2019-11-20 09:39:18
     */
    change (val) {
      this.handler(val);
    },
    /**
     * @name getSyncData
     * @description 获取远程数据
     * @author cjs1992
     * @date 2019-11-20 09:04:19
     */
    async getSyncData () {
      const method = this.$attrs.method || 'get';
      let obj = {
        method: method,
        url: this.$attrs.asyncUrl,
      };
      const ajaxData = this.$attrs.ajaxData;
      if (method === 'get') {
        Object.assign(obj, {
          params: ajaxData
        })
      } else {
        const headers = {
          'Content-Type': 'application/json;charset=utf-8'
        }
        Object.assign(obj, {
          data: ajaxData,
          ...headers
        })
      }
      let res = await request(obj);
      let list;
      switch (Object.prototype.toString.call(res.data)) {
        case '[object Object]':
          list = [ res.data ];
          break;
        case '[object Array]':
          list = res.data;
          break;
      }
      this.setChildrenNull(list);
      this.options = list;
    },
    /**
     * @name setChildrenNull
     * @description 
     * @author cjs1992
     * @date 2019-11-20 09:32:04
     */
    setChildrenNull (list) {
      for (let len = list.length, i = 0; i < len; i++) {
        const item = list[i];
        // let obj = JSON.parse(
        //   JSON.stringify(item)
        // );
        // delete obj.children;
        // item.c_value = JSON.stringify(obj);
        if (!item.children || !item.children.length) {
          delete item.children;
          continue;
        }
        this.setChildrenNull(item.children);
      }
    }
  }
}
</script>